<template>
	<!-- 查看详情 -->
	<view class="content">
		<view class="title">
			课程名称
		</view>
		<view class="input">
			<input type="text" disabled="false" placeholder="请输入课表名称" v-model="ListDada.name"
			 placeholder-style="font-size: 32upx; color:#CCCCCC;" />
		</view>
		<view class="title">
			课程内容
		</view>
		<view class="select">
			<view class="select_item">
				<view class="select_item_left">
					周数
				</view>
				<view class="select_item_right font_color">
					第{{ListDada.weeknum}}周
				</view>
			</view>

			<view class="select_item">
				<view class="select_item_left">
					节数
				</view>
				<view class="select_item_right font_color">
					{{ListDada.pitchnum}}
				</view>
			</view>

			<view class="select_item">
				<view class="select_item_left">
					类型
				</view>
				<picker disabled="false" class="select_item_right" @change="bindPickerChange" :value="ListDada.array_index"
				 :range="array">
					<view class="picker">
						<view :class="{font_color:ListDada.selectName!='请选择'}">{{ListDada.selectName}}</view>
						<i class='iconfont icon-fanhui' v-if='ListDada.finishstate==4'></i>
					</view>
				</picker>
			</view>

			<view v-if="array_index==0" class="select_item">
				<view class="select_item_left">
					学习内容
				</view>
				<view class="select_item_right">
					<view :class="{font_color:ListDada.content!='请选择'}">{{ListDada.content}}</view>
					<i class='iconfont icon-fanhui' v-if='ListDada.finishstate==4'></i>
				</view>
			</view>

			<view v-if="array_index==1" class="select_item">
				<view class="select_item_left">
					备注
				</view>
				<view class="select_item_right">
					<input selection-end type="text" disabled="false" placeholder="请填写备注" placeholder-style="font-size: 32upx; color:#CCCCCC;" />
				</view>
			</view>

			<view class="select_item">
				<view class="select_item_left">
					状态
				</view>
				<view class="select_item_right font_color" :style="ListDada.color">
					{{ListDada.stateName}}
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn_left">拒绝</view>
			<view class="btn_rigth">同意</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weeknum: 1,
				selectName: '请选择',
				stucontent: '请选择', //学习内容
				pitchnum: '周四  第1节',
				array: ['学习', '其它'],
				array_index: 0,
				date: '',
				ListDada: {},
				color: '#C2C2C2',
				is_edit:true
			}
		},
		onLoad() {
			var data = {
				name: '语文',
				weeknum: 1,
				array_index: 0,
				pitchnum: '周四  第1节',
				content: '第一单元 沁园春.雪',
				finishstate: 3
			};
			data.selectName = this.array[data.array_index];
			switch (data.finishstate) {
				case 1:
					data.stateName = '已完成';
					data.color = 'color:#00D5A2';
					break;
				case 2:
					data.stateName = '未完成';
					data.color = 'color:#FF7171';
					break;
				case 3:
					data.stateName = '待审核';
					data.color = 'color:#FF9900';
					break;
				case 4:
					data.stateName = '待完成';
					data.color = 'color:#C2C2C2';
					break;
				default:
					break;
			}
			this.ListDada = data;

		},
		methods: {
	
		}

	}
</script>

<style>
	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(250, 250, 250, 1);
	}

	.title {
		width: 96%;
		height: 90upx;
		line-height: 90upx;
		margin-left: 4%;
		font-size: 32upx;
		color: rgba(102, 102, 102, 1);
	}

	.input {
		width: 100%;
		height: 80upx;
		background: #FFFFFF;
		font-size: 32upx;
		color: #666666;
	}

	.input input {
		width: 96%;
		margin-left: 4%;
		height: 100%;
	}

	.select {
		width: 100%;
		background: rgba(255, 255, 255, 1);
	}

	.select_item {
		width: 92%;
		height: 92upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(229, 229, 229, 1);
	}

	.select_item_left {
		width: 50%;
		font-size: 32upx;
		color: rgba(51, 51, 51, 1);
	}

	.select_item_right {
		width: 50%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font: 32upx;
		color: #333333;
	}

	.select_item_right i {
		font-size: 18upx;
		margin-left: 10upx;
		color: #C2C2C2;
	}

	.select_item_right input {
		direction: rtl;
	}

	.select_item:last-child {
		border-bottom: none;
	}

	.picker {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.font_color {
		color: #333333;

	}

	.btn {
		width: 84%;
		height: 80upx;
		margin: auto;
		margin-top: 62upx;
		display: flex;
		justify-content: space-between;
	}
	.btn_left{
		width: 40.5%;
		height: 80upx;
		border-radius:8upx;
		background:rgba(255,113,113,1);
		text-align: center;
		line-height: 80upx;
		font-size: 34upx;
		color: #FFFFFF;
	}
	.btn_rigth{
		width: 40.5%;
		height: 80upx;
		border-radius:8upx;
		background:rgba(0,213,162,1);
		text-align: center;
		line-height: 80upx;
		font-size: 34upx;
		color: #FFFFFF;
	}
</style>
